<template>
	<view>
		<view class="mkjaddes">请告知您的取消原因，我们会努力为您提供更好的服务</view>
		<view class="njhbsd" v-for="(itmi, i) in listade" :key="i">
			<view class="dxk"><van-cell border="false" :title="itmi.text" /></view>
			<view class="mkjnaddes"><van-checkbox :value="itmi.checked" @change="onChange(i)"></van-checkbox></view>
		</view>
		<view class="mkjn"><input class="weui-input" maxlength="50" placeholder="请输入您的取消原因(50字以内)" /></view>
		<view class="mkjnn"><van-button type="primary" @click="cancelOrder" :color="!show ? '#ff8e94' : '#e6454a'" size="large">取消订单</van-button></view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reqZfjk } from '@/api/modules/order.js'
import { reactive, toRefs } from 'vue'
const state = reactive({
	listade: [
		{ text: '需修改服务地址', checked: false },
		{ text: '预约时间不合适', checked: false },
		{ text: '修改服务时长', checked: false },
		{ text: '价格原因', checked: false },
		{ text: '其他 (填空)', checked: false }
	],
	cid: '',
	show: false
})

const cancelOrder = async () => {
	const index = state.listade.findIndex(item => item.checked === true)
	if(index === -1) return uni.showToast({title:'请选择原因', icon: 'none'})
	await reqZfjk({ cid: state.cid, onsale: 7 })
	uni.navigateBack()
}

const onChange = i => {
	state.listade[i].checked = !state.listade[i].checked
	const index = state.listade.findIndex(item => item.checked === true)
	index !== -1 ? state.show = true : state.show = false
}
// 页面加载
onLoad(message => {
	state.cid = message.cid
	console.log(message)
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { checked, listade, show } = toRefs(state)
</script>

<style lang="scss">
page {
	padding: 0;
}
.mkjaddes {
	font-size: 11px;
	padding: 10rpx 20rpx;
	background-color: #f1f1f1;
}
.njhbsd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.dxk {
		flex: 1;
	}
}
.mkjn {
	padding: 20rpx;
}
.mkjnn {
	margin-top: 100rpx;
	padding: 0 20rpx;
}
</style>
